<template>
	<custom-form-layout>
		<fui-form>
			<custom-form-item-card>
				<fui-form-item asterisk label-width="auto" label="处理时间" arrow :bottomBorder="false" @click="choseDate">
					<template #right>
						<fui-text type="primary" :padding="[0,0,0,0]" :text="handelTime" :size="32"></fui-text>
					</template>
				</fui-form-item>

			</custom-form-item-card>

			<custom-form-item-card>
				<fui-form-item label="处理状态" label-width="auto" asterisk arrow :bottomBorder="false"
					@click="showActionSheet">
					<template #right>
						<fui-text type="primary" :text="actionValue.text" :size="32"></fui-text>
					</template>

				</fui-form-item>
			</custom-form-item-card>
		</fui-form>
		<!-- 退回 -->
		<!-- <ChargeBack class="m-t-32"></ChargeBack> -->
		<component :is="actionValue.componentName" class="m-t-32" :ref="actionValue.refName" @disabled="onDisabled">
		</component>

		<template #footer>
			<fui-row :gutter=" 16">
				<fui-col :span="12">
					<fui-button background="#F2F3FF" color="#0052D9" @click="onCancel"
						:disabled="disabled">取消</fui-button>
				</fui-col>
				<fui-col :span="12">
					<fui-button @click="onConfirm" :disabled="disabled">确认</fui-button>
				</fui-col>
			</fui-row>
		</template>
	</custom-form-layout>

	<fui-date-picker :show="visibleDatePicker" type="5" @change="changeDatePicker" @cancel="cancelDatePicker"
		:value="handelTime"></fui-date-picker>
	<fui-actionsheet :show="visibelActionSheet" :itemList="actionSheetList" @click="onSelectedActionSheet"
		@cancel="cancelActionSheet"></fui-actionsheet>
</template>

<script>
	import ChargeBack from './components/chargeback/index.vue'
	import Complete from './components/complete/index.vue'
	import Cooperation from './components/cooperation/index.vue'
	import Handle from './components/handle/index.vue'
	import Pause from './components/pause/index.vue'
	import Termination from './components/termination/index.vue'
	import Transfer from './components/transfer/index.vue'
	import Upgrade from './components/upgrade/index.vue'
	import utils from '@/components/firstui/fui-utils';
	import {
		useHandleWorkOrder
	} from '../../store/modules/handleWorkOrder'
	import {
		mapActions,
		mapState
	} from "pinia"

	import {
		SubPages
	} from '../../config/router-config'

	export default {
		components: {
			ChargeBack,
			Complete,
			Cooperation,
			Handle,
			Pause,
			Termination,
			Transfer,
			Upgrade
		},
		data() {
			return {

				visibleDatePicker: false,
				visibelActionSheet: false,
				disabled: false,
				actionValue: {
					text: '处理',
					value: 'handle',
					componentName: 'Handle',
					refName: 'handle'
				},
				handelTime: null,

				orderNum: '',
				actionSheetList: [{
						text: '处理',
						value: 'handle',
						componentName: 'Handle',
						refName: 'handle'
					}, {
						text: '完成',
						value: 'complete',
						componentName: 'Complete',
						refName: 'complete'
					}, {
						text: '转交',
						value: 'transfer',
						componentName: 'Transfer',
						refName: 'transfer'
					}, {
						text: '多人协作',
						value: 'cooperation',
						componentName: 'Cooperation',
						refName: 'cooperation'
					},
					// {
					// 	text: '工单升级',
					// 	value: 'upgrade',
					// 	componentName: 'Upgrade',
					// 	refName: 'upgrade'
					// },
					{
						text: '退单',
						value: 'chargeback',
						componentName: 'ChargeBack',
						refName: 'chargeback'
					}, {
						text: '暂停',
						value: 'pause',
						componentName: 'Pause',
						refName: 'pause'
					}, {
						text: '终止',
						value: 'termination',
						componentName: 'Termination',
						refName: 'termination'
					},
				]
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			console.log('onlaod');
			this.setRouterInfo(options)
			// if (!this.routerInfo) {
			// }
			const {
				orderNum,
				handleState,
				assetName,
				assetAddr
			} = this.routerInfo || options
			const findVal = this.actionSheetList.find(item => item.value == handleState)
			console.log(findVal);
			this.actionValue = findVal
			this.orderNum = orderNum
			this.handelTime = utils.dateFormatter(Date.now(), 'y-m-d h:i', 2)



		},

		computed: {
			...mapState(useHandleWorkOrder, ['routerInfo']),

		},
		methods: {
			...mapActions(useHandleWorkOrder, ['setRouterInfo']),
			onDisabled(disabled) {
				this.disabled = disabled
			},
			showActionSheet() {
				this.visibelActionSheet = true
			},
			cancelActionSheet() {
				this.visibelActionSheet = false
			},
			onSelectedActionSheet(data) {
				this.visibelActionSheet = false
				this.actionValue = data
				this.setRouterInfo({
					...this.routerInfo,
					handleState: data.value
				})
			},
			showSign() {
				this.visibleSign = true
			},

			// 选择时间
			choseDate() {
				this.visibleDatePicker = true
			},

			changeDatePicker({
				result
			}) {
				this.visibleDatePicker = false
				this.handelTime = result
				console.log(result)
			},
			cancelDatePicker() {
				this.visibleDatePicker = false
			},
			onCancel() {
				uni.navigateBack()
			},
			onConfirm() {
				console.log(this.$refs);
				const the = this
				this.$refs[this.actionValue.refName].submit(this.orderNum, () => {
					the.setRouterInfo(null)


					uni.redirectTo({
						url: SubPages.MY_WORK_ORDER.router
					})
				})

			}


		}
	}
</script>

<style lang="scss" scoped>
	.sign {
		&-page {
			display: flex;
			flex-direction: row;
			height: 100vh;

		}

		&-opert {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			position: relative;

			.sign-button {
				transform: rotate(90deg);
				position: absolute;

			}

			.button1 {
				top: 10%
			}

			.button2 {
				top: 45%
			}

			.button3 {
				top: 80%
			}

			// transform: rotate(90);
		}

		&-area {
			flex: 1;
			background-color: #e7e7e7;
			// padding: 16rpx;

			.signature {
				// background-color: #fff;
			}
		}

		&-box {
			margin: 6rpx;
			height: 352rpx;
			background: #ffffff;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			border: 2rpx solid #e7e7e7;
			line-height: 352rpx;
			text-align: center;
		}
	}
</style>